import Vue from "vue";

function setHeight(el: any, binding?: any) {
  Vue.nextTick(() => {
    // tabbar高度
    let tabBarHeight = 0;
    const tabBar = document.getElementById("tabBar");
    if (tabBar) {
      tabBarHeight = tabBar.offsetHeight;
    }

    const _offsetTop = el.offsetTop;

    let excessHeight = 0;
    if (binding && binding.value && binding.value.excessIds && binding.value.excessIds.length) {
      binding.value.excessIds.forEach((item: string) => {
        const _dom = document.getElementById(item);
        if (_dom) {
          excessHeight = _dom.offsetHeight;
        }
      });
    }
    setTimeout(() => {
      // 窗口高度
      const height =
        window.innerHeight || //浏览器窗口的内部高度（包括滚动条）
        document.documentElement.clientWidth ||
        document.body.clientHeight;
      el.style.height = `${height - _offsetTop - tabBarHeight - excessHeight}px`;
    }, 100);
  });
}

Vue.directive("fullheight", {
  /**
   *
   * @param el
   * @param binding
   * binding.value会传入额外的需要减去的dom节点高度，传参如：<div v-fullheight="{ excessIds: ['btn-div'] }"></div>
   * excessIds代表需要减去的dom节点合集
   */
  bind: function(el: any, binding: any) {
    setHeight(el, binding);
    // window.onresize = function() {
    //   setHeight(el);
    // };
  }
  // update: function(el: any, binding: any) {
  //   if (binding.value) {
  //     setHeight(el, binding);
  //   }
  // }
});
